<template>
  <div class="app-container">
    <div class="components-container">
      <el-card class="box-card">
        <el-form label-width="80px">
          <el-form-item v-for="attr in workcard.workrelattrs" :key="attr.name" :label="attr.name">
            <el-input v-model="attr.value" :readonly="!attr.editable"/>
          </el-form-item>
          <el-form-item label="工艺规范">
            <el-button v-if="workcard&&workcard.gygf&&workcard.gygf.uid" type="text" @click="displayAttachment(id, workcard.gygf.path)">
              {{ workcard.gygf.name||'' }}
            </el-button>
            <el-button v-else type="text" disabled>
              无附件
            </el-button>
          </el-form-item>
          <el-form-item>
            <router-link :to="{ path: '/workcard/workinstruction', query: { 'workuid': workuid} }">
              <el-button type="primary" size="small" icon="el-icon-d-arrow-right">执行</el-button>
            </router-link>
            <el-button type="primary" size="small" icon="el-icon-close" @click.prevent.stop="onClose()">关闭</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getWorkcard } from '@/utils/storage'
import { showFile } from '@/utils/file'
import { getWorkcardID } from '@/utils/workcard-util'

export default {
  props: {
    workuid: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      finished: false,
      workcard: {},
      id: ''
    }
  },
  computed: {
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    }
  },
  mounted: function() {
    const that = this
    getWorkcard(this.workuid).then(
      workcard => {
        that.workcard = workcard.workcard
        that.id = getWorkcardID(workcard.workcard)
      }
    )
  },
  methods: {
    isActive(view) {
      return view.path === this.$route.path
    },
    onClose() {
      const activeView = this.visitedViews.filter(v => this.isActive(v))[0]
      this.$store.dispatch('delView', activeView).then(({ visitedViews }) => {
        if (this.isActive(activeView)) {
          const latestView = visitedViews.slice(-1)[0]
          if (latestView) {
            this.$router.push(latestView)
          } else {
            this.$router.push('/')
          }
        }
      })
    },
    displayAttachment(id, path) {
      showFile(id, path)
    }
  }
}
</script>
